<template>
	<view class="login-wrapper page-wrapper linear-back">
		<image src="/static/images/logo.png" mode="aspectFill" class="logo-box"></image>
		<view class="content-box">
			<CommonInput type="text" v-model="username" focus
				:placeholder="$t('pages.login.placeholder_username')" maxlength="30">
				<template #prefix>
					<uni-icons type="person-filled" size="24" color="#9CA3AF"></uni-icons>
				</template>
			</CommonInput>
			<CommonInput class="form-gap" :type="showPasswd ? 'text' : 'password'" v-model="password"
				:placeholder="$t('pages.login.placeholder_password')" maxlength="30" >	
				<template #prefix>
					<uni-icons type="locked-filled" size="24" color="#9CA3AF"></uni-icons>
				</template>
				<template #suffix>
					<up-icon name="eye-off" v-if="showPasswd" size="24" @click="changePasswdStatus" color="#9CA3AF"></up-icon>					
					<up-icon name="eye" v-else size="24" @click="changePasswdStatus" color="#9CA3AF"></up-icon>
				</template>
			</CommonInput>
			<view class="bottom-link-box">
				<up-checkbox :label="$t('pages.login.remember_label')" size="16" usedAlone v-model:checked="rememberMe"
					style="width: 400rpx;display: inline-flex;margin: 0;" activeColor="#15B8A6">
				</up-checkbox>
				<text class="active-text middle-text" @click="navigateToUniPage('/pages/setting/resetPwd')">{{ $t('pages.login.forget_label') }}</text>
			</view>

			<view>
				<up-button @click="login" :text="$t('pages.login.login_button')" class="middle-round" size="normal" 
					type="primary" style="width: 600rpx;margin-top:30rpx;" shape="square"></up-button>				
				<text class="active-text middle-text" style="margin-top: 24rpx;display: block;" @click="navigateToUniPage('/pages/register/index')">{{ $t('pages.login.registe_label') }}</text>
			</view>
			<up-divider style="width: 640rpx;"></up-divider>

			<view class="bottom-desc">
				{{ $t('pages.login.concat_list.0')  }} 
				<text class="active-text" @click.stop="toUserAgreement">{{ $t('pages.login.concat_list.1')  }}</text>
				{{ $t('pages.login.concat_list.2')  }} 
				<text class="active-text" @click.stop="toPrivacy">{{ $t('pages.login.concat_list.3')  }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from "vue";
	import {
		loginApi
	} from "@/api/request";
	import {
		navigateToUniPage,
		CacheUtils,
	} from '@/utils/index.js';
	import {
		useI18n
	} from 'vue-i18n';
	import CommonInput from '@/components/CommonInput/index.vue';

	const { t } = useI18n();
	const username = ref('');
	const password = ref('');
	const rememberMe = ref(true);
	const showPasswd = ref(false);
	const version = ref('');
	
	const privacyPath = 'http://www.fepft.com/petcarehub_privacy_policy.html';
	const agreementPath = 'http://www.fepft.com/petcarehub_service_agreement.html';
	
	const toPrivacy = () => navigateToUniPage(
	`/pages/webview/index?path=${ encodeURIComponent(privacyPath) }&&title=${ t('pages.login.concat_list.3') }`);
	const toUserAgreement = () => navigateToUniPage(
		`/pages/webview/index?path=${ encodeURIComponent(agreementPath) }&&title=${ t('pages.login.concat_list.1') }`);
	

	const changePasswdStatus = ()=>showPasswd.value = !showPasswd.value;
	const validateUsername = () => {
		const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		const phonePattern = /^[1][3-9][0-9]{9}$/;
		if (emailPattern.test(username.value) || phonePattern.test(username.value)) {
			return true
		} else {
			return false
		}
	};
	const validatePassword = () => {
		const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/;
		if (!passwordPattern.test(password.value)) {
			return false
		} else {
			return true
		}
	};

	const login = async () => {
		if (!validateUsername()) {
			uni.showToast({
				title: t('pages.login.validate.username'),
				icon: 'none'
			})
			return
		}
		if (!validatePassword()) {
			uni.showToast({
				title: t('pages.login.validate.username'),
				icon: 'none'
			})
			return
		}

		if (rememberMe.value) {
			CacheUtils.set('username', username.value);
			CacheUtils.set('password', password.value);
		} else {
			CacheUtils.remove('password')
		}

		uni.showLoading({
			title: t('pages.login.loading_login')
		})

		let res = await loginApi({
			UserName: username.value,
			Password: password.value
		})
		uni.hideLoading();

		if (res.response.result == true) {
			CacheUtils.set('userInfo', res.data);
			CacheUtils.set('userid', res.data.userid);
			navigateToUniPage('/pages/index/index');
		} else {
			uni.showToast({
				title: res.response.msg,
				icon: 'none'
			})
		}
	}

	const toRegister = () => navigateToUniPage('/pages/login/register');
	const toResetPasswd = () => navigateToUniPage('/pages/login/reset');
	const getCachedPasswd = () => {
		password.value = CacheUtils.get('password') || '';
		username.value = CacheUtils.get('username') || '';
	}

	onMounted(() => {
		getCachedPasswd();
	});
</script>


<style lang="scss" scoped>
	.login-wrapper {
		position: relative;
		width: 750rpx;
		height: 100%;
		
		
		.logo-box{
			width: 240rpx;
			height: 240rpx;
			border-radius: 40rpx;
			display: block;
			margin: 80rpx auto 100rpx;
		}

		.content-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 30rpx;
			text-align: center;

			.title {
				font-size: 48rpx;
				color: #9CA3AF;
			}

			.desc {
				color: #707070;
				font-size: 32rpx;
				margin-bottom: 40rpx;
			}

			.form-gap {
				margin-top: 30rpx;
			}

			.bottom-link-box {
				padding: 20rpx 0rpx;
				display: flex;
				width: 600rpx;
				font-size: 24rpx;
				color: #707070;
				justify-content: space-between;
				align-items: center;
			}

		}
	}

	.bottom-desc {
		margin-top: 30rpx;
		color: #9CA3AF;
		font-size: 24rpx;
	}

	.active-text {		
		color: #15B8A6;
	}
</style>